<template>
    <el-form class="form-box" ref="loginRef" :model="form" size="large">
        <el-form-item
            label=""
            prop="userName"
            :rules="[
                {
                    required: true,
                    message: '请输入用户名称!'
                }
            ]"
        >
            <el-input :prefix-icon="User" placeholder="请输入用户名称" v-model="form.userName" autocomplete="off" allowClear></el-input>
        </el-form-item>
        <el-form-item
            label=""
            prop="password"
            :rules="[
                {
                    required: true,
                    message: '请输入用户密码!'
                }
            ]"
        >
            <el-input type="password" show-password :prefix-icon="Lock" placeholder="请输入用户密码" v-model="form.password" autocomplete="off" allowClear></el-input>
        </el-form-item>

        <el-form-item label="" prop="remember">
            <div class="full-box">
                <div class="flex-bet">
                    <el-checkbox v-model="form.remember">保持会话</el-checkbox>
                    <el-button @click="toRegister" type="primary" link>去注册</el-button>
                </div>
                <div>
                    <el-button class="full-box set-h-4" type="primary" :loading="btnLoading" @click="submitForm(loginRef)">登录</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { getLoginName } from '@/vueLsp/loginInfo.js'

import { userStore } from '@/store/index'
const userState = userStore()

const emits = defineEmits(['login'])
const router = useRouter()
const btnLoading = ref(false)

const formDataRef = {
    userName: getLoginName(),
    password: getLoginName(),
    remember: !!getLoginName()
}
const form = reactive({ ...formDataRef })
const loginRef = ref(null)

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            btnLoading.value = true
            emits('login', form)
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const toRegister = () => {
    router.push({
        path: '/register'
    })
}

const cancelBtnLoading = () => {
    btnLoading.value = false
}

defineExpose({
    cancelBtnLoading
})
</script>
<style scoped lang="scss">
.form-box {
    margin-top: 30px;
    padding: 0px;
}

.flex-bet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.register-tip {
    text-align: left;
}

.set-h-4 {
    height: 40px;
}

.set-h-6 {
    height: 60px;
}
</style>
